<template>
    <div class="admins-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix updt">
                <el-page-header @back="$router.go(-1)" content="编辑管理员">
                </el-page-header>
            </div>
            <div class="form-database-form">
                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <el-form-item label="帐号" prop="username" required
                        :rules="[{ required: true, message: '请填写帐号' }, { validator: rule.checkRemote, message: '已存在', checktype: 'update', module: 'admins', col: 'username', id: '{{   form.id   }}', trigger: 'blur' }]">
                        <el-input placeholder="输入帐号" style="width:250px;" v-model="form.username" /> </el-form-item>
                    <el-form-item v-if="btnText">
                        <el-button type="primary" @click="submit">{{ btnText }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.admins-add {}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'


export default {
    name: 'admins-add',
    data() {
        return {
            rule,
            loading: false,
            form: {
                username: '',


            },


        }
    },
    watch: {
        id: {
            handler() {
                this.loadInfo();
            }
        }
    },
    props: {
        isRead: {
            type: Boolean,
            default: true
        },
        btnText: {
            type: String,
            default: '提交'
        },
        id: {
            type: [String, Number],
            required: true
        },
    },

    computed: {},
    methods: {
        submit() {
            this.$refs.formModel.validate().then(res => {
                if (this.loading) return;
                this.loading = true;
                var form = this.form;

                this.$post(api.admins.update, form).then(res => {
                    this.loading = false;
                    if (res.code == api.code.OK) {
                        this.$message.success('添加成功');
                        this.$emit('success', res.data);
                        this.$refs.formModel.resetFields();
                        this.loadInfo();
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                })

            }).catch(err => {
                console.log(err.message);
            })

        },
        loadInfo() {

            // 更新数据,获取数据
            this.loading = true;
            var form = this.form;
            this.$post(api.admins.edit, {
                id: this.id
            }).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                    this.form = res.data.mmm;

                } else {
                    this.$message.error(res.msg);
                    this.$router.go(-1);
                }
            }).catch(err => {
                this.$message.error(err.message);
                this.$router.go(-1);
            });
        },
    },
    created() {
        this.loadInfo();
    },
    mounted() {
    },
    destroyed() {
    }
}
</script>
